<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <title>嵌入式样式表</title>
  <style type="text/css">
    /* 元素选择器 */
    strong {
      background-color: black;
      color: white;
    }
    tr {
      text-align: center;
    }
    /* 类别选择器 */
    .tr1 {
      background-color: red;
      color: blue;
    }
    .tr3 {
      font-size: 30px;
    }
    /* id选择器 */
    #p2 {
      font-size: larger;
    }
    #table1 {
      background-color: tan;
      border-style: dashed;
      width: 300px;
    }
    /* 以上是基本选择器，以下是复合选择器
    交集选择器（元素紧邻类或id）
    element.class */
    td.set1 {
      color: paleturquoise;
    }
    /* element#id */
    td#td7 {
      color: hotpink;
    }
    /* 并集选择器（元素必须与类、id分开）
    tr #td4, #td6 */
    #td4, #td6 {
      font-style: inherit;
      border-style: outset;
      color: green;
    }
    /* tr .set2, #td9 */
    .set2, #td9 {
      font-size: 35px;
      color: darkorchid;
    }
    /* 子代元素选择器 */
    pre b {
      color: white;
      font-size: large;
      background-color: orange;
    }
    /* #td8 */
    table .tr3 #td8 {
      color: saddlebrown;
    }
  </style>
</head>
<body>
嵌入式样式表，指在网页中通过style元素定义元素的样式<br>
<iframe src="introduction.html" width="65%" height="200px">你的浏览器不支持框架</iframe>
<p id="p1">段落</p>
<p id="p2">段落</p>
<pre>
  预排版
  <b>提醒注意</b>
  预排版
</pre>
<div>
<strong>强调</strong>
</div>
<table id="table1">
  <tr class="tr1">
    <td id="td1">单元格1</td>
    <td id="td2">单元格2</td>
    <td id="td3">单元格3</td>
  </tr>
  <tr class="tr2">
    <td id="td4">单元格4</td>
    <td class="set1" id="td5">单元格5</td>
    <td id="td6">单元格6</td>
  </tr>
  <tr class="tr3">
    <td id="td7">单元格7</td>
    <td id="td8">单元格8</td>
    <td id="td9">单元格9</td>
  </tr>
</table>
<table id="table2" border="1" width="220">
  <tr class="tra">
    <td class="set1">单元格a</td>
    <td class="set1">单元格b</td>
  </tr>
  <tr class="trb">
    <td class="set2">单元格c</td>
    <td class="set2">单元格d</td>
  </tr>
</table>
</body>
</html>